import classNames from "classnames";
import "./index.scss";
import { useTakeawayStore } from "@/store/takeaway";

const Menu = () => {
  const foodsList = useTakeawayStore((state) => state.foodsList);
  const activeIndex = useTakeawayStore((state) => state.activeIndex);
  const setActiveIndex = useTakeawayStore((state) => state.setActiveIndex);

  const menus = foodsList.map((item) => ({ tag: item.tag, name: item.name }));
  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
            onClick={() => {
              setActiveIndex(index);
            }}
            key={item.tag}
            className={classNames("list-menu-item", {
              active: activeIndex === index,
            })}
          >
            {item.name}
          </div>
        );
      })}
    </nav>
  );
};

export default Menu;
